在昨天的文章中，我們深入探討了Flexbox（彈性盒佈局） 的進階控制，學會了元件如何在「一條軸線」上因應空間進行伸展與擠壓。

但是，如果當網頁佈局變得更加複雜：例如同時需要精準對齊「橫向的行（Rows）」與「縱向的列（Columns）」時，如果單靠Flexbox透過多層父子容器嵌套來達成，程式碼就會變得非常亂且難以維護。

這時候，我們就需要CSS現代佈局的第二大核心支柱：Grid網格佈局（Grid Layout）。

Flexbox vs Grid

在看程式碼範例之前，我們必須先釐清這兩者在空間思維上的本質差異：

Grid 的四個基礎幾何專有名詞

要玩Grid，必須先在腦海中建立一張「棋盤圖」，並認得以下四個核心名詞：

1. 網格容器（Grid Container）與網格項目（Grid Item）
   • 當我們在父容器宣告display: grid;，它就成為了「網格容器」，而其直屬的子元件則自動成為「網格項目」。
2. 網格線（Grid Lines）
   • 劃分網格的格子線，橫向的叫行線（Row Lines），縱向的叫列線（Column Lines），注意：網格線是從1開始編號的。
3. 網格軌道（Grid Tracks）
   • 兩條相鄰平行網格線之間的空間，簡單來說，一整行（Row） 或 一整列（Column） 就是一個軌道。
4. 網格單元格（Grid Cell）
   • 四條網格線圍成的最小幾何單位，就像是棋盤上的一個格子。

最速上手屬性：定義你的第一個網格

要在父容器上畫出格子，我們主要使用以下兩個屬性：

• grid-template-columns：定義縱向有幾列、每列多寬。
• grid-template-rows：定義橫向有幾行、每行多高。

這裡引入一個 Grid 專屬的全新幾何單位：fr（Fraction，比例片段），它會自動計算並瓜分剩餘空間，非常好用。

實作範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day17 Grid 網格佈局基礎</title>
    <style>
        /* 讓最上面的標題文字水平置中 */
        h2 {
            text-align: center;
            margin-top: 30px;
        }

        .grid-container {
            display: grid;
            /* 定義三列：寬度分別為 1fr、2fr、1fr（依比例瓜分寬度） */
            grid-template-columns: 1fr 2fr 1fr;
            /* 定義兩行：高度皆為 120px（使用 repeat 函數簡寫） */
            grid-template-rows: repeat(2, 120px);
            /* 設定格子之間的間距（外邊距）為 10px */
            gap: 10px;
            
            background-color: #ede6e6;
            padding: 10px;
            max-width: 600px;
            margin: 0 auto 30px auto;
        }

        .grid-item {
            background-color: #2c3e50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            font-weight: bold;
            border-radius: 4px;
        }
    </style>
</head>
<body>

    <h2>我的第一個二維網格 (3 x 2 Grid)</h2>
    <div class="grid-container">
        <div class="grid-item">項目 1</div>
        <div class="grid-item">項目 2</div>
        <div class="grid-item">項目 3</div>
        <div class="grid-item">項目 4</div>
        <div class="grid-item">項目 5</div>
        <div class="grid-item">項目 6</div>
    </div>

</body>
</html>

簡單介紹

當你打開這段程式碼時，你會明顯看到：

1. 結構自動生成：我們完全沒有在.grid-item上寫任何寬高或浮動屬性，子元件就自動乖乖地填入我們規劃好的6個格子裡。
2. fr的威力和彈性：中間的「項目 2」與「項目 5」因為分到了 2fr，其寬度剛好會是左右兩側（1fr）的兩倍大，且會隨著視窗拉伸自動縮放！
3. gap完美的間距：以前用margin做多欄排版時，最討厭邊緣元件溢出，Grid的gap屬性只會在格子與格子之間產生縫隙，容器邊緣依然完美貼齊。

總結

今天我們成功從一維的線性思維，升到了二維的網格棋盤思維，掌握了 grid-template-*、fr單位與repeat()函數，你就已經拿到了建構大型網頁外殼的骨架鑰匙。

在明天（Day 18），我將介紹網頁元素的自由定位利器：position 屬性，我們將暫時打破標準排版流的幾何束縛，學會如何使用Relative、Absolute與Fixed，讓元件在網頁畫面上隨意指定座標，明天見。